<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.tabs{
				display: flex;
				border-bottom: 2px solid gray;

			}
			.tabs .tab{
				padding: 10px 20px;
				user-select: none; /* 让文本不会被选中 */
			}
			.tabs .tab.active{
				color: red;
				border-bottom: 2px solid red;
				margin-bottom: -1px;
			}
		</style>
	</head>
	<body>
		<h3>测试vue基本语法</h3>
		<div id="app"> 
			<div>
				<img width="100px" :src="movie.imgSrc" alt="">
			</div>
			<div>电影标题:{{movie.name}}</div>
			<div>电影主演:{{movie.actors.join(' / ')}}</div>
			<div>上映时间:{{movie.showingon}}</div>
			<div>电影类型：{{movie.type.join(' / ')}}</div>
			<div>电影时长：{{Math.floor(movie.duration/60)}}小时 {{movie.duration%60}}分钟</div>
			<div>电影评分：{{movie.score}}分</div>
			<div class="tabs">
				<div @click="activeIndex=0" :class="`tab ${activeIndex==0?'active':''}`">介绍</div>
				<div @click="activeIndex=1" :class="`tab ${activeIndex==1?'active':''}`">演职人员</div>
				<div @click="activeIndex=2" :class="`tab ${activeIndex==2?'active':''}`">奖项</div>
				<div @click="activeIndex=3" :class="`tab ${activeIndex==3?'active':''}`">图集</div>
			</div>
			<div class="tabs">
				<div @click="activeIndex=0" :class="{tab:true,active:activeIndex==0}">首页</div>
				<div @click="activeIndex=1" :class="{tab:true,active:activeIndex==1}">新闻</div>
				<div @click="activeIndex=2" :class="{tab:true,active:activeIndex==2}">联系我们</div>
				<div @click="activeIndex=3" :class="{tab:true,active:activeIndex==3}">课后服务</div>
			</div>
			<div :style="`display:${activeIndex==0? 'block':'none'}`">1</div>
			<div  v-show="activeIndex==1">2</div>    
			<div :style="`display:${activeIndex==2? 'block':'none'}`">3</div>
			<div :style="`display:${activeIndex==3? 'block':'none'}`">4</div>

			<hr>
			<button @click="sum(5,8)">算加法</button>
			<button @click="sum()">sun()</button>
			<button @click="sum">sum</button>
			<button @click="sum(8,$event)">sum($event)</but-ton>


			<!-- 提供一个按钮 -->
			<!-- <input type="text" @blur="" @focus="" @keydown=""> -->
			<button @click="btn">点击换一部电影</button>
			<hr>
			<input :type="typeName" placeholder="请输入密码">
			<button @click="btnPwd">小眼睛</button>
			<hr>
			<button @click="n++" :disabled="n>=10">+</button>
			{{n}}
			<button @click="n--" :disabled="n<=0">-</button>
		</div>
		
		<script src="./vue.js"></script>
		<script>
			// 基于vue.js 管理页面中的DOM元素
			let vm = new Vue({
				el:'#app',
				data:{
					movie:{
						name:"消失的他",
						actors:['朱一龙','旁长江','黎明'],
						showingon:'2023-06-22',
						duration:124,
						type:['惊悚','悬疑'],
						score:9.3,
						imgSrc:'https://p0.pipi.cn/mmdb/fb738671537c69e5bc02ff9ad5c95aa31a703.jpg?imageView2/1/w/464/h/644'
					},
					typeName:'password',
					n:1,
					activeIndex:0, //tabs 激活项的下标 0，1，2，3
				},
				methods: {
					btn(){
						this.movie = {
						name:"2222",
						actors:['2222','2222','2222'],
						showingon:'2023-06-22',
						duration:222,
						type:['22','22'],
						score:2.2,
						imgSrc:'https://p0.pipi.cn/mmdb/fb738651c69d7ce5bc8d33c970e7b59f064c7.jpg?imageView2/1/w/464/h/644'
						}

					},
					sum(a,b){
						console.log({a,b});
						console.log(a+b);
					},
					btnPwd(){
						// console.log(this.dong);
						// this.dong = 'password'? 'text':'password'
						// console.log(this.dong);
						if(this.typeName == 'password'){
							this.typeName = 'text'
						}else{
							this.typeName = 'password'
						}
					}
				}
			})
			// var btn = document.getElementById('btn')
			// btn.onclick = function (){
			// 	vm.movie = {
			// 		name:"222",
			// 			actors:['222','2222','222'],
			// 			showingon:'2023-06-22',
			// 			duration:222,
			// 			type:['22','22'],
			// 			score:2
			// 	}
			// }
		</script>
	</body>
</html>
